<template>
    <div>
        <el-container>
            <el-aside style="width: 200px;overflow-x: hidden" class="aside" v-bind:style="{height: pageHeight}">
                <elnav :menuList="menuList" :index="navIndex" @addTab="addTab"></elnav>
            </el-aside>
            <el-container>
                <el-header style="text-align: right; font-size: 12px">
                    <elheader @getMenuIndex="getMenuIndex" :menuList="menuList"></elheader>
                </el-header>
                <el-main v-bind:style="{maxHeight: maxHeight}" style="overflow-y: auto">
                    <el-tabs v-model="activeName" @tab-click="handleClick" closable @tab-remove="removeTab">
                        <el-tab-pane v-for="(item, index) in tabs" :key="item.name" :label="item.title" :name="item.name">
                            <keep-alive>
                                <router-view></router-view>
                            </keep-alive>
                            <!--{{item.content}}-->
                        </el-tab-pane>
                    </el-tabs>

                </el-main>
                <el-footer>Copyright © 东臣科技, All Rights Reserved.</el-footer>
            </el-container>
        </el-container>
    </div>
</template>

<script>

    import {baseUtil} from '@/util/BaseUtil';
    // import {ajax} from '@/util/HttpUtil';
    import elheader from "./el-header";
    import elnav from "./el-nav";
    // import store from '@/store/store'

    export default {
        components: {elheader, elnav},
        name: "index",
        data() {
            return {
                baseUtil: baseUtil,
                // 左侧导航栏的高度
                // pageHeight: (window.innerHeight - 60) + 'px',
                pageHeight: window.innerHeight + 'px',
                maxHeight : (window.innerHeight - 120) + 'px',
                // menuList : store.state.menuList,
                menuList : [],
                navIndex: 0,

                tabs : [],
                tabsNames : [],
                tabIndex : 0,
                activeName : "",
            }
        },
        methods: {
            /**
             * 获取菜单
             */
            getMenuList() {
                this.baseUtil.ajaxPost(this, '/menu/getMenuList', {}, (response) => {
                    this.menuList = response.data;
                    // store.dispatch('setMenuList', response.data);
                });
            },
            getMenuIndex(index) {
                console.log(index);
                this.navIndex = index;
            },
            // 添加标签
            addTab(map) {
                if(this.tabsNames.indexOf(map.name) >= 0) {
                    this.activeName = map.name;
                }else {
                    this.tabs.push(map);
                    // this.tabIndex = this.tabs.length - 1;
                    this.activeName = map.name;
                    this.tabsNames.push(map.name);
                }
                this.$router.push({ path: map.content });
            },
            // 删除标签
            removeTab(targetName) {
                console.log(targetName)
                let tabs = this.tabs;
                let activeName = this.activeName;
                let names = [];
                if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                            }
                        }
                        names.push(tab.name);
                    });
                }
                this.tabsNames = names;
                console.log(this.tabsNames);
                this.activeName = activeName;
                this.tabs = tabs.filter(tab => tab.name !== targetName);
            },
            // 点击标签
            handleClick() {
                // console.log(tab, event);
                this.$router.push({ path: "/home/" + tab._props.name });
            },

        },
        created() {
            this.getMenuList();
        }
    }
</script>

<style scoped>
    .el-header, .el-footer {
        /*background-color: #B3C0D1;*/
        color: #333;
        text-align: center;
        line-height: 60px;
        /*border-bottom: 1px #e6e6e6 solid;*/
    }
    .el-footer{
        /*border-top: 1px #e6e6e6 solid;*/
        background-color: #B3C0D1;
    }

    .el-aside {
        /*background-color: #D3DCE6;*/
        /*color: #333;*/
        text-align: center;
        line-height: 200px;
        border-right: solid 1px #e6e6e6
    }

    .el-main {
        text-align: center;
        line-height: 32px;
        padding: 6px;
        border-top: solid 1px #e6e6e6;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }

    .el-table th{
        text-align: center;
    }

    .el-menu.el-menu--horizontal{
        border-bottom: 0;
    }

    /*滚动条整体样式*/
    .aside::-webkit-scrollbar {
        /*高宽分别对应横竖滚动条的尺寸*/
        width: 5px;
        height: 5px;
    }
    /*滚动条里面小方块*/
    .aside::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: #e5dfff;
    }
    /*滚动条里面轨道*/
    .aside::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 10px;
        background: #EDEDED;
    }
</style>
